<!DOCTYPE html>
<html>
<head>
	<title>首页文件</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="js/vue/vue.min.js"></script>
	<style>
		.container{
			width:500px;
			height:500px;
			margin:20px auto;
			display: flex;
			background: #ccc;
			flex-wrap:wrap;
			align-content: flex-start;
		}
		.container span{
			display:inline-block;
			width:30px;
			height:30px;
			border:1px solid #000;
			margin:2px;
			font-size:12px;
		}
		.container span.type-1{
			cursor: pointer;
		}
		.container span.type-2{
			visibility: hidden;
		}
	</style>

</head>
<body>
	<div class="container" id="container">
		<div v-if="listObj != null" v-for="row in (areaInfo.totalRow)">
			<span 
				v-for="column in (areaInfo.totalColumn)" 
				:class="'type-'+listObj[row+','+column].type"
				:title="listObj[row+','+column].seatName"
				>{{row}},{{column}}</span>
		<div>
	</div>
</body>
</html>
	
<script>
	var vm = new Vue({
		el: '#container',
		components: {
	  	},
		data:function(){
			return {
				list:[
					/*{
						columnNum: 1,
						rowNum:1,
						seatName:'1排1号',
						type:1,//1 是座位  2是走廊
					},*/
				],
				listObj:null,
				areaInfo:{
					totalColumn:11,
					totalRow:11,
				}
			}
		},
		created: function(){
			this.getListData();
		},
		methods:{
			getListData: function(){
				var totalColumn = this.areaInfo.totalColumn;
				var totalRow = this.areaInfo.totalRow;
				var columnEmpty = [4, 8];//空位置
				var rowEmpty = [6, 9];//空位置
				var list = [];
				for(var row = 1; row <= totalRow; row ++){
					for(var column = 1; column <= totalColumn; column ++){
						//判断是座位还是走廊
						let type = 1;
						if(columnEmpty.indexOf(column) != -1 || rowEmpty.indexOf(row) != -1){
							type = 2;
						}
						list.push({
							columnNum: column,
							rowNum:row,
							seatName:row + '排'+ column +'号',
							type:type,//1 是座位  2是走廊
						});
					}
				}
				
				let listObj = {};
				for(var i in list){
					let item = list[i];
					var key = item.rowNum + ',' + item.columnNum;
					listObj[key] = item;
				}
				this.list = list;
				this.listObj = listObj;
			},
			
		},
		filters:{
			
		},
		computed:{
			
		},
		watch:{
			
		}
	})
</script>


